<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vision Analyzer 配置</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
            color: #333;
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
            background: white;
            border-radius: 16px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            font-weight: 700;
        }

        .header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .current-model {
            background: rgba(255,255,255,0.2);
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
            font-weight: 600;
        }

        .content {
            padding: 40px;
        }

        .provider-section {
            margin-bottom: 35px;
            padding: 25px;
            border: 2px solid #e8f4fd;
            border-radius: 12px;
            background: #fafdff;
            transition: all 0.3s ease;
        }

        .provider-section:hover {
            border-color: #4facfe;
            box-shadow: 0 8px 25px rgba(79, 172, 254, 0.15);
        }

        .provider-title {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 15px;
            color: #2c3e50;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .provider-info {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            border-left: 4px solid #4facfe;
        }

        .provider-info p {
            line-height: 1.6;
            color: #555;
            margin-bottom: 8px;
        }

        .provider-info a {
            color: #4facfe;
            text-decoration: none;
        }

        .provider-info a:hover {
            text-decoration: underline;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #444;
        }

        .form-group input {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 1rem;
            transition: all 0.3s ease;
            background: white;
        }

        .form-group input:focus {
            outline: none;
            border-color: #4facfe;
            box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1);
        }

        .password-input-container {
            position: relative;
            display: flex;
            align-items: center;
        }

        .password-input-container input {
            padding-right: 45px;
        }

        .password-toggle {
            position: absolute;
            right: 12px;
            cursor: pointer;
            user-select: none;
            color: #666;
            font-size: 18px;
            background: none;
            border: none;
            padding: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.3s ease;
        }

        .password-toggle:hover {
            color: #4facfe;
        }

        .buttons {
            text-align: center;
            margin-top: 40px;
            padding-top: 30px;
            border-top: 2px solid #e8f4fd;
        }

        .btn {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            border: none;
            padding: 14px 32px;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 0 10px;
            box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(79, 172, 254, 0.4);
        }

        .btn:active {
            transform: translateY(0);
        }

        .btn-secondary {
            background: linear-gradient(135deg, #f44336 0%, #e91e63 100%);
            box-shadow: 0 4px 15px rgba(244, 67, 54, 0.3);
        }

        .btn-secondary:hover {
            box-shadow: 0 8px 25px rgba(244, 67, 54, 0.4);
        }

        .status {
            text-align: center;
            margin: 25px 0;
            padding: 15px 20px;
            border-radius: 8px;
            font-weight: 600;
            display: none;
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .success {
            background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .error {
            background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .loading {
            display: none;
            text-align: center;
            margin: 20px 0;
        }

        .spinner {
            border: 3px solid #f3f3f3;
            border-top: 3px solid #4facfe;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 15px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .footer {
            background: #f8f9fa;
            padding: 25px;
            text-align: center;
            color: #666;
            border-top: 1px solid #e0e0e0;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                margin: 10px;
                border-radius: 12px;
            }

            .header h1 {
                font-size: 2rem;
            }

            .content {
                padding: 25px;
            }

            .provider-section {
                padding: 20px;
            }

            .btn {
                display: block;
                width: 100%;
                margin: 10px 0;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎯 Vision Analyzer</h1>
            <p>配置您的LLM服务提供商以启用视觉分析功能</p>
            <div class="current-model" id="currentModel">
                当前模型: <span id="currentModelName">未配置</span>
            </div>
        </div>

        <div class="content">
            <div class="status" id="status"></div>

            <div class="loading" id="loading">
                <div class="spinner"></div>
                <p>正在处理配置...</p>
            </div>

            <div class="provider-section">
                <div class="provider-title">
                    🌙️ Moonshot (月之暗面)
                </div>
                <div class="provider-info">
                    <p><strong>模型：</strong>moonshot-v1-8k-vision-preview</p>
                    <p><strong>注册地址：</strong><a href="https://platform.moonshot.cn/" target="_blank">https://platform.moonshot.cn/</a></p>
                    <p><strong>说明：</strong>月之暗面提供的多模态大模型，支持高分辨率图像理解</p>
                </div>
                <div class="form-group">
                    <label for="moonshot-key">API密钥:</label>
                    <div class="password-input-container">
                        <input type="password" id="moonshot-key" placeholder="请输入Moonshot API密钥" value="{{moonshotApiKey}}">
                        <button class="password-toggle" onmousedown="event.preventDefault(); showPassword('moonshot-key')" onmouseup="event.preventDefault(); hidePassword('moonshot-key')" onmouseleave="event.preventDefault(); hidePassword('moonshot-key')" title="按住显示密码" type="button">
                            👁️
                        </button>
                    </div>
                </div>
                <div class="form-group">
                    <label for="moonshot-url">Base URL:</label>
                    <input type="url" id="moonshot-url" value="https://api.moonshot.cn/v1">
                </div>
            </div>

            <div class="provider-section">
                <div class="provider-title">
                    🚀 Tencent (腾讯混元)
                </div>
                <div class="provider-info">
                    <p><strong>模型：</strong>hunyuan-vision</p>
                    <p><strong>注册地址：</strong><a href="https://console.cloud.tencent.com/hunyuan" target="_blank">https://console.cloud.tencent.com/hunyuan</a></p>
                    <p><strong>说明：</strong>腾讯提供的混元大模型，性能优异，支持多种视觉任务</p>
                </div>
                <div class="form-group">
                    <label for="tencent-key">API密钥:</label>
                    <div class="password-input-container">
                        <input type="password" id="tencent-key" placeholder="请输入腾讯混元API密钥" value="{{tencentApiKey}}">
                        <button class="password-toggle" onmousedown="event.preventDefault(); showPassword('tencent-key')" onmouseup="event.preventDefault(); hidePassword('tencent-key')" onmouseleave="event.preventDefault(); hidePassword('tencent-key')" title="按住显示密码" type="button">
                            👁️
                        </button>
                    </div>
                </div>
                <div class="form-group">
                    <label for="tencent-url">Base URL:</label>
                    <input type="url" id="tencent-url" value="https://api.hunyuan.cloud.tencent.com/v1">
                </div>
            </div>

            <div class="provider-section">
                <div class="provider-title">
                    🧠 Zhipu AI (智谱AI)
                </div>
                <div class="provider-info">
                    <p><strong>模型：</strong>glm-4.5v</p>
                    <p><strong>注册地址：</strong><a href="https://open.bigmodel.cn/" target="_blank">https://open.bigmodel.cn/</a></p>
                    <p><strong>说明：</strong>智谱AI提供高质量的中文视觉理解能力，适合中文用户使用</p>
                </div>
                <div class="form-group">
                    <label for="zai-key">API密钥:</label>
                    <div class="password-input-container">
                        <input type="password" id="zai-key" placeholder="请输入智谱AI API密钥" value="{{zaiApiKey}}">
                        <button class="password-toggle" onmousedown="event.preventDefault(); showPassword('zai-key')" onmouseup="event.preventDefault(); hidePassword('zai-key')" onmouseleave="event.preventDefault(); hidePassword('zai-key')" title="按住显示密码" type="button">
                            👁️
                        </button>
                    </div>
                </div>
                <div class="form-group">
                    <label for="zai-url">Base URL:</label>
                    <input type="url" id="zai-url" value="https://open.bigmodel.cn/api/paas/v4">
                </div>
            </div>

            <div class="provider-section">
                <div class="provider-title">
                    ⚙️ 自定义提供商
                </div>
                <div class="provider-info">
                    <p><strong>说明：</strong>如果您有其他兼容OpenAI API格式的服务商，可以在这里配置</p>
                </div>
                <div class="form-group">
                    <label for="custom-name">提供商名称:</label>
                    <input type="text" id="custom-name" placeholder="例如: openai, claude" value="{{customName}}">
                </div>
                <div class="form-group">
                    <label for="custom-key">API密钥:</label>
                    <div class="password-input-container">
                        <input type="password" id="custom-key" placeholder="请输入自定义API密钥" value="{{customApiKey}}">
                        <button class="password-toggle" onmousedown="event.preventDefault(); showPassword('custom-key')" onmouseup="event.preventDefault(); hidePassword('custom-key')" onmouseleave="event.preventDefault(); hidePassword('custom-key')" title="按住显示密码" type="button">
                            👁️
                        </button>
                    </div>
                </div>
                <div class="form-group">
                    <label for="custom-url">Base URL:</label>
                    <input type="url" id="custom-url" placeholder="https://api.openai.com/v1" value="{{customBaseUrl}}">
                </div>
            </div>

            <div class="buttons">
                <button class="btn" onclick="saveConfig()">💾 保存配置</button>
                <button class="btn btn-secondary" onclick="window.close()">❌ 关闭</button>
            </div>
        </div>

        <div class="footer">
            <p>配置完成后，Vision Analyzer 将自动使用新的API密钥进行视觉分析</p>
        </div>
    </div>

    <script>
        // 显示密码
        function showPassword(inputId) {
            const input = document.getElementById(inputId);
            if (input) {
                input.type = 'text';
            }
        }

        // 隐藏密码
        function hidePassword(inputId) {
            const input = document.getElementById(inputId);
            if (input) {
                input.type = 'password';
            }
        }

        // 显示状态消息
        function showStatus(message, type) {
            const statusEl = document.getElementById('status');
            statusEl.textContent = message;
            statusEl.className = `status ${type}`;
            statusEl.style.display = 'block';

            // 3秒后自动隐藏成功消息，5秒后隐藏错误消息
            setTimeout(() => {
                statusEl.style.display = 'none';
            }, type === 'success' ? 3000 : 5000);
        }

        // 显示/隐藏加载状态
        function setLoading(show) {
            document.getElementById('loading').style.display = show ? 'block' : 'none';
        }

        // 更新当前模型显示
        function updateCurrentModel(modelName) {
            document.getElementById('currentModelName').textContent = modelName || '未配置';
        }

        // 保存配置
        async function saveConfig() {
            setLoading(true);

            const config = {
                currentProviderModel: '', // 将在后面设置
                moonshot: {
                    apiKey: document.getElementById('moonshot-key').value.trim(),
                    baseUrl: document.getElementById('moonshot-url').value.trim()
                },
                tencent: {
                    apiKey: document.getElementById('tencent-key').value.trim(),
                    baseUrl: document.getElementById('tencent-url').value.trim()
                },
                zai: {
                    apiKey: document.getElementById('zai-key').value.trim(),
                    baseUrl: document.getElementById('zai-url').value.trim()
                },
                custom: {
                    name: document.getElementById('custom-name').value.trim(),
                    apiKey: document.getElementById('custom-key').value.trim(),
                    baseUrl: document.getElementById('custom-url').value.trim()
                }
            };

            // 设置当前模型（优先使用第一个有API密钥的提供商）
            const providers = ['moonshot', 'tencent', 'zai', 'custom'];
            for (const provider of providers) {
                if (config[provider].apiKey) {
                    config.currentProviderModel = provider === 'moonshot' ? 'moonshot-v1-8k-vision-preview' :
                        provider === 'tencent' ? 'hunyuan-vision' :
                        provider === 'zai' ? 'glm-4.5v' : `${config[provider].name}-model`;
                    break;
                }
            }

            try {
                const response = await fetch('/api/config', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(config)
                });

                const data = await response.json();

                if (data.success) {
                    showStatus('✅ 配置保存成功！', 'success');
                    updateCurrentModel(data.currentModel || config.currentProviderModel);
                } else {
                    showStatus(`❌ 配置保存失败: ${data.error}`, 'error');
                }
            } catch (error) {
                showStatus(`❌ 网络错误: ${error.message}`, 'error');
            } finally {
                setLoading(false);
            }
        }

        // 页面加载时设置当前模型
        document.addEventListener('DOMContentLoaded', function() {
            // 这里可以设置当前模型显示
            updateCurrentModel('{{currentModel}}' || '未配置');
        });
    </script>
</body>
</html>